<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        span {
            width: 100px;
            padding-right: 30px;
            border-right: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <p>
        <span>姓名: </span>
        <input v-model="name">
    </p>
    <p>
        <span>性别： </span>
        <input type="radio" id="one" value="男" v-model="gender"/>
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="gender"/>
        <label for="two">女</label>
    </p>
    <p>
        <span>爱好：</span>
        <input type="checkbox" id="hobby1" value="篮球" v-model="hobby"/>
        <label for="hobby1">篮球</label>
        <input type="checkbox" id="hobby2" value="唱歌" v-model="hobby"/>
        <label for="hobby2">唱歌</label>
        <input type="checkbox" id="hobby3" value="写代码" v-model="hobby"/>
        <label for="hobby3">写代码</label>
    </p>
    <p>
        <span>职业:</span>
        <select v-model="profession" size="4">
            <option value="老板">老板</option>
            <option value="软件工程师">软件工程师</option>
            <option value="律师">律师</option>
            <option value="教师">教师</option>
        </select>
    </p>
    <p>
        <span>个人简介</span>
        <textarea v-model="individualResume"></textarea>
    </p>
    <p>
        <span>年龄：</span>
        <input type="number" v-model="age">
    </p>
    <p>
        <span>城市:</span>
        <select v-model="city">
            <option value="厦门">厦门</option>
            <option value="龙岩">龙岩</option>
            <option value="福州">福州</option>
            <option value="漳州">漳州</option>
        </select>
    </p>
    <p>
        <input type="checkbox" v-model="isInput">
        <button :disabled="!isInput" value="提交" @click="istrue = !istrue">提交</button>
    </p>
    <h1 v-if="istrue">您的个人信息是：</h1>
    <h1 v-if="istrue">用户名-{{ name }} 年龄-{{ gender }} 性别-{{ gender }} 爱好-{{ hobby }} 职业-{{ profession }}
        自我介绍-{{ individualResume }} 城市-{{ city }}</h1>
</div>

<script>
    const {createApp} = Vue;
    const app = createApp({
        data() {
            return {
                name: '',
                gender: '',
                hobby: [],
                profession: '',
                individualResume: '',
                age: 0,
                city: '',
                isInput: false,
                istrue: false,
            }
        }
    }).mount("#app")
</script>
</body>
</html>